<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="检索内容">
        <el-input size="mini" v-model="formInline.user" placeholder="账号|姓名|邮箱"></el-input>
      </el-form-item>

      <el-form-item >
        <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="mini">查询</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="success"  icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true" size="mini">新增</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="warning" icon="el-icon-delete" size="mini" @click="handleBatchDelete">批量删除</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="success"  icon="el-icon-circle-plus-outline" size="mini">设置角色</el-button>
      </el-form-item>
    </el-form>
<!-- 数据表样式-->
<el-table :data="list" style="width: 100%" border height="640" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="courseId" label="课程ID" width="250"> </el-table-column>
      <el-table-column prop="courseName" label="课程名" width="250">
      </el-table-column>
      <el-table-column prop="teacherId" label="教师ID" width="250">
      </el-table-column>
      <el-table-column prop="courseLocation" label="上课地点" width="250">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.row)" size="small">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteClick(scope.row)">删除</el-button>
          </el-button-group>
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  
     <el-dialog title="新增用户" :visible.sync="dialogFormVisible"  width="500px">
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 400px">
    <el-form-item label="姓名" prop="username" >
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
     <el-form-item label="手机" prop="tel" width="60">
      <el-input v-model="ruleForm.tel"></el-input>
    </el-form-item>
     <el-form-item label="邮箱" prop="email" width="60">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>

    <el-form-item label="性别" prop="sex">
      <el-select v-model="ruleForm.sex">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>

  </el-form>
</el-dialog>
  </div>
</template>

<script>
import { getList,deleteBatch,addUser } from '@/api/course'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      formInline: {
          user: '',
          region: ''
        },
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      total:100,
      currentPage:1,
      pageSize:10,
      selectedRows: [], // 用于存储选中的行
      ruleForm:{
        username:'陈健恒',
        sex:'1',
        tel:'13769484638',
        email:'13579@qq.com',

      },

      rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '手机不能为空', trigger: 'blur' },
            {pattern: /^1[3456789]\d{9}$/,message:'请输入正确的手机号',trigger:'blur'}
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message:'请输入正确的邮箱地址',trigger:'blur'}
            
          ]
        },
      

      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        
        },
        formLabelWidth: '120px'
      }
  },
  created() {
    this.fetchData()
  },
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            addUser(this.ruleForm).then(response => {
               this.dialogFormVisible = false,
               this.$message.success('添加成功');
              }).catch(error => {
               this.$message.error('添加失败：' + error.message);
              });            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    onSubmit() {
      //调用查询
        this.fetchData();
      },
    fetchData() {
      this.listLoading = true
      var json={currentPage:this.currentPage,pageSize:this.pageSize,content:this.formInline.user}
      getList(json).then(response => {
        this.list = response.data.list
        this.listLoading = false
        this.total = response.data.total
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.fetchData();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.fetchData();
    },
    //每一列按钮事件处理
    handleClick(row) {
      console.log(row);
  },
 // 批量删除按钮事件处理
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请至少选择一行');
        return;
      }
      this.$confirm('确定要删除选中的用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         var id = this.selectedRows.map(row => row.id);
         console.log("----->"+id);
         
        
        deleteBatch({ids:id+""}).then(() => {
          this.$message.success('删除成功');
          this.fetchData(); // 刷新表格数据
        }).catch(error => {
          this.$message.error('删除失败：' + error.message);
        });
      }).catch(() => {
        // 用户取消删除
      });
    },
    // 表格行选中事件处理
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    
    },

    deleteClick(row){
      this.$confirm('确定要['+row.username+']删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         var id = this.selectedRows.map(row => row.id);
         console.log("----->"+id);
         
        
        deleteBatch({ids:row.id+""}).then(() => {
          this.$message.success('删除成功');
          this.fetchData(); // 刷新表格数据
        }).catch(error => {
          this.$message.error('删除失败：' + error.message);
        });
      }).catch(() => {
        // 用户取消删除
      });
    },
    handleClick(row){
       this.dialogFormVisible = true
       this.ruleForm = row
    }

}
}
</script>
